<template>
	<div class="sw_block_table">
		<el-scrollbar v-if="mode === '1'">
			<el-checkbox-group ref="sortable" v-model="checkedData" :style="{ '--column': responsive }">
				<el-card class="handle" shadow="hover" v-for="(item, index) in list" :key="index" :body-style="{ padding: 0 }">
					<el-checkbox :label="item.id" v-if="!!isCheck"></el-checkbox>
					<slot name="bodybox" :data="item"></slot>
					<div class="buttons" v-if="!!$scopedSlots.buttons">
						<slot name="buttons" :data="item"></slot>
					</div>
				</el-card>
			</el-checkbox-group>
		</el-scrollbar>
		<template v-else-if="mode === '2'">
			<el-table ref="table" :data="list" height="100%" @select="handleSelectChecked">
				<el-table-column type="selection" label="选择" width="48" v-if="!!isCheck"></el-table-column>
				<slot name="columns"></slot>
			</el-table>
		</template>
	</div>
</template>

<script>
export default {
	name: 'swBlockTable',
	props: {
		value: { type: Array, default: () => [] },
		list: { type: Array, default: () => [] },
		mode: { type: String, default: '1' },
		isCheck: { type: Boolean, default: false }
	},
	data() {
		return {
			responsive: 4,
			checkedData: this.value
		};
	},
	watch: {
		value(arr) {
			this.checkedData = arr;
		},
		checkedData(arr) {
			this.$emit('input', arr);
			if (this.mode === '1') return false;
			this.$nextTick(() => {
				arr.forEach((id) => {
					let info = this.list.find((n) => n.id === id);
					!!info && this.$refs['table'].toggleRowSelection(info, true);
				});
			});
		},
		mode() {
			this.checkedData = [];
		}
	},
	mounted() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
	},
	methods: {
		//动态修改列
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			if (width > 2250) {
				this.responsive = 8;
			} else if (width > 1950) {
				this.responsive = 7;
			} else if (width > 1650) {
				this.responsive = 6;
			} else if (width > 1366) {
				this.responsive = 5;
			} else {
				this.responsive = 4;
			}
		},

		//表格选中
		handleSelectChecked(selection, row) {
			this.checkedData = selection.map((n) => n.id);
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_block_table::v-deep {
	height: 100%;
	overflow: hidden;
	.el-scrollbar {
		height: 100%;
	}
	.el-scrollbar__wrap {
		overflow: hidden;
		overflow-y: auto;
	}
	.el-scrollbar__bar.is-horizontal {
		display: none;
	}
	.el-checkbox-group {
		display: grid;
		grid-gap: 16px;
		grid-template-columns: repeat(var(--column), 1fr);
		margin: 0 6px 0 0;
		box-sizing: border-box;
		overflow: hidden;
		.el-checkbox {
			position: absolute;
			top: 8px;
			right: 8px;
		}
	}
	.el-card__body {
		position: relative;
	}
	.el-checkbox__label {
		display: none;
	}
	.buttons {
		display: flex;
		justify-content: space-between;
		margin: 0 16px;
		padding: 2px 0;
		box-sizing: border-box;
		border-top: solid 1px #ebeef5;
	}
	.el-table {
		border: solid 1px #ebeef5;
		border-bottom: none;
	}

	th.el-table__cell {
		&:first-child .cell::before {
			content: '选择';
		}
		.el-checkbox {
			display: none;
		}
	}
}
</style>
